﻿<local:BindableListBox x:Class="PasswordProvider.View.Library.MultiComboBox"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
    xmlns:local="clr-namespace:PasswordProvider.View.Library"                   
    >
    
    <local:BindableListBox.Resources>

        
        <!-- Style for a ListBoxItem displayed inside the embedded list box, to make it a check box when mode = multiple. -->
        <Style x:Key="MultiSelectItemStyleKey" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border Background="Transparent">
                            <CheckBox Focusable="false" 
                                  Foreground="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground}"
                                  BorderBrush="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Control}}, Path=Foreground}"                                           
                                  Content="{TemplateBinding ContentPresenter.Content}"  
                                  IsChecked="{Binding Path=IsSelected, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Style for a ListBoxItem displayed inside the embedded list box, when mode = single -->
        <Style x:Key="SingleSelectItemStyleKey" TargetType="{x:Type ListBoxItem}">
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Margin" Value="0,-1" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush" Value="{DynamicResource DetailActiveBrush}" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="{DynamicResource DetailActiveBrush}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Control template to define the look of the button which opens the create new site property page -->
        <ControlTemplate x:Key="ActionInListBoxButtonTemplate" TargetType="{x:Type Button}">
            <Grid>
                <Border Name="border" Height="14" HorizontalAlignment="Center" 
                    BorderBrush="{TemplateBinding Foreground}" BorderThickness="1,0" CornerRadius="7">
                    <Viewbox Name="viewbox" HorizontalAlignment="Right">
                        <TextBlock Name="textblock" Foreground="{TemplateBinding Foreground}" Margin="3,0"  
                                   Text="{TemplateBinding Content}" />
                    </Viewbox>
                </Border>
                <TextBlock Height="3" Margin="5,0" Opacity="0" Text="{TemplateBinding Content}" />
            </Grid>

            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="viewbox" Property="Margin" Value="0.5" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="border" Property="BorderThickness" Value="2,0" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <!-- Template for the toggle button which is the main view of the control -->
        <ControlTemplate x:Key="MultiSelectComboBoxToggleButtonTemplate" TargetType="{x:Type ToggleButton}">
            <Border BorderThickness="{TemplateBinding BorderThickness}" 
                    Background="{TemplateBinding Background}" 
                    BorderBrush="{TemplateBinding BorderBrush}"
                    SnapsToDevicePixels="true">

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <ContentPresenter Width="{TemplateBinding Width}" Content="{TemplateBinding Content}" />

                    <Border Name="arrowBorder" Grid.Column="1" Width="16" BorderBrush="{TemplateBinding BorderBrush}">
                        <Path Name="arrow" HorizontalAlignment="Center" VerticalAlignment="Center" 
                              Fill="{TemplateBinding BorderBrush}" Data="M 0 0 L 7 0 L 3.5 4 Z" />
                    </Border>
                </Grid>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="arrowBorder" Property="BorderThickness" Value="1,0,0,0" />
                    <Setter TargetName="arrowBorder" Property="Background" Value="{DynamicResource ActiveButtonBrush}" />
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="arrowBorder" Property="BorderThickness" Value="1,0,0,0" />
                    <Setter TargetName="arrowBorder" Property="Background" Value="{DynamicResource ActiveButtonBrush}" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <!-- Template for MultiComboBox - ReadOnly implies that there may be an editable version some day.  -->
        <ControlTemplate x:Key="MultiSelectComboBoxReadOnlyTemplate" TargetType="{x:Type local:MultiComboBox}">
            <Grid >
                <ToggleButton Name="toggleButton" Focusable="False"
                              Background="{TemplateBinding Background}"
                              BorderBrush="{TemplateBinding BorderBrush}"
                              BorderThickness="{TemplateBinding BorderThickness}"
                              Template="{StaticResource MultiSelectComboBoxToggleButtonTemplate}"
                              IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen, Mode=TwoWay}"                              
                          >

                    <StackPanel Name="PART_labelContentPanel" Margin="4,0,6,0"  Orientation="Horizontal" VerticalAlignment="Center"                                   
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />

                </ToggleButton>

                <Popup Name="PART_popup" AllowsTransparency="True" Margin="0" Placement="Bottom"                            
                   IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen}" 
                   PopupAnimation="Slide">
                    <theme:SystemDropShadowChrome Name="dropShadow" Color="Transparent" 
                                              MinWidth="{TemplateBinding ActualWidth}">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}" >
                            <StackPanel>
                                <ScrollViewer MaxHeight="{TemplateBinding MaxDropDownHeight}" 
                                              Padding="{TemplateBinding Padding}" Focusable="false"
                                          ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                                          ScrollViewer.VerticalScrollBarVisibility="Auto" >
                                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                </ScrollViewer>
                                <Grid Grid.Row="1">
                                    <Button Name="showEditBoxButton" Margin="0,0,0,3"
                                        HorizontalAlignment="Right" Foreground="{TemplateBinding Foreground}"
                                        Visibility="Collapsed"
                                        Template="{StaticResource ActionInListBoxButtonTemplate}">new item</Button>
                                    <Border Name="newItemEditGroup" Visibility="Collapsed" >
                                        <Grid Height="Auto" Margin="3">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="Auto"/>
                                            </Grid.ColumnDefinitions>
                                            <TextBox Grid.Column="0" Background="White" Name="PART_textBoxNewItem"/>
                                            <Button Name="PART_newItemCreatedOkButton" 
                                                Grid.Column="1" 
                                                Content="Ok" 
                                                Foreground="{TemplateBinding Foreground}"
                                                Template="{StaticResource ActionInListBoxButtonTemplate}"                                                        
                                                />
                                        </Grid>
                                    </Border>
                                </Grid>
                            </StackPanel>
                        </Border>
                    </theme:SystemDropShadowChrome>
                </Popup>

            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="{DynamicResource ActiveBorderBrush}" />
                </Trigger>
                <Trigger SourceName="toggleButton" Property="IsChecked" Value="True">
                    <Setter Property="BorderBrush" Value="{DynamicResource DetailActiveBrushDark}" />
                </Trigger>
                
                <Trigger Property="IsCreateNewEnabled" Value="True">
                    <Setter TargetName="showEditBoxButton" Property="Visibility" Value="Visible" />
                </Trigger>
                <Trigger SourceName="PART_popup" Property="Popup.HasDropShadow" Value="true">
                    <Setter TargetName="dropShadow" Property="Margin" Value="0,0,5,5"/>
                    <Setter TargetName="dropShadow" Property="Color" Value="#71000000"/>
                </Trigger>

                <EventTrigger SourceName="showEditBoxButton" RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="newItemEditGroup" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>

                            <DoubleAnimation Storyboard.TargetName="showEditBoxButton" Storyboard.TargetProperty="Opacity" 
                                             To="0" Duration="0:0:0"/>
                            <BooleanAnimationUsingKeyFrames Storyboard.TargetName="showEditBoxButton" Storyboard.TargetProperty="IsTabStop">
                                <DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:0" />
                            </BooleanAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger SourceName="PART_newItemCreatedOkButton" RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="newItemEditGroup" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>

                            <DoubleAnimation Storyboard.TargetName="showEditBoxButton" Storyboard.TargetProperty="Opacity" 
                                             To="1" Duration="0:0:0"/>
                            <BooleanAnimationUsingKeyFrames Storyboard.TargetName="showEditBoxButton" Storyboard.TargetProperty="IsTabStop">
                                <DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:0" />
                            </BooleanAnimationUsingKeyFrames>

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
      
        
    </local:BindableListBox.Resources>

    <local:BindableListBox.Style>
        <Style TargetType="{x:Type local:MultiComboBox}">
            <Setter Property="MinHeight" Value="23" />
            <Setter Property="BorderBrush" Value="{DynamicResource DetailBrush}" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Background" Value="{DynamicResource WindowBrush}" />
            <Setter Property="Template" Value="{StaticResource MultiSelectComboBoxReadOnlyTemplate}" />
            <Setter Property="ItemContainerStyle" Value="{StaticResource MultiSelectItemStyleKey}" />
            <Style.Triggers>
                <Trigger Property="SelectionMode" Value="Single">
                    <Setter Property="ItemContainerStyle" Value="{StaticResource SingleSelectItemStyleKey}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </local:BindableListBox.Style>
</local:BindableListBox>
       